<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 总容器 -->
    <div class="wrapper">
      <!-- header部分 -->
      <header class="bg-[#0097FF] h-12vw flex items-center px-3vw">
        <div class="icon-location-box w-3.5vw h-3.5vw mr-1vw">
          <div class="icon-location"></div>
        </div>
        <div class="location-text text-white text-4.5vw font-bold flex items-center">
          沈阳市规划大厦<i class="fa fa-caret-down ml-1vw"></i>
        </div>
      </header>

      <!-- search部分 -->
      <div class="search h-13vw">
        <div ref="fixedBox" class="search-fixed-top bg-[#0097FF] h-13vw flex justify-center items-center">
          <div class="search-box bg-white w-90% h-9vw rounded-2px flex justify-center items-center text-3.5vw text-[#AEAEAE]">
            <i class="fa fa-search mr-1vw"></i>搜索饿了么商家、商品名称
          </div>
        </div>
      </div>

      <!-- 点餐分类部分  -->
      <ul class="foodtype flex flex-wrap justify-around items-center h-48vw bg-white">
        <li v-for="(item, index) in foodTypes" :key="index"
            class="w-18vw h-20vw flex flex-col justify-center items-center cursor-pointer"
            @click="goToBusinessList(item)">
          <div class="food-icon w-12vw h-10.3vw bg-center bg-no-repeat bg-contain"
               :style="{ backgroundImage: `url('/img/dcfl${index < 9 ? '0' + (index+1) : index+1}.png')` }"></div>
          <p class="text-3.2vw text-gray-600 mt-1vw">{{ item }}</p>
        </li>
      </ul>

      <!-- 横幅广告部分 -  -->
      <div class="banner w-95% h-29vw mx-auto bg-cover bg-no-repeat px-6vw py-2vw"
           style="background-image: url('/img/index_banner.png')">
        <h3 class="text-4.2vw mb-1.2vw">品质套餐</h3>
        <p class="text-3.4vw text-gray-600 mb-2.4vw">搭配齐全吃得好</p>
        <a class="text-3vw text-[#C79060] font-bold cursor-pointer">立即抢购 &gt;</a>
      </div>

      <!-- 超级会员部分 -->
      <div class="supermember w-95% h-11.5vw mx-auto bg-[#FEEDC1] mt-1.3vw rounded-2px text-[#644F1B] flex justify-between items-center">
        <div class="left flex items-center ml-4vw">

          <h3 class="text-4vw mr-2vw">超级会员</h3>
          <p class="text-3vw">&#8226; 每月享超值权益</p>
        </div>
        <div class="right text-3vw mr-4vw cursor-pointer">
          立即开通 &gt;
        </div>
      </div>

      <!-- 推荐商家部分 -->
      <div class="recommend h-14vw flex justify-center items-center">
        <div class="recommend-line w-6vw h-0.2vw bg-gray-400"></div>
        <p class="text-4vw mx-4vw">推荐商家</p>
        <div class="recommend-line w-6vw h-0.2vw bg-gray-400"></div>
      </div>

      <!-- 推荐方式部分 -->
      <ul class="recommendtype h-5vw mb-5vw flex justify-around items-center">
        <li v-for="(item, index) in sortOptions" :key="index" class="text-3.5vw text-gray-500 flex items-center cursor-pointer">
          {{ item }}<i v-if="index === 0 || index === 3" class="fa ml-0.5vw" :class="index === 0 ? 'fa-caret-down' : 'fa-filter'"></i>
        </li>
      </ul>

      <!-- 推荐商家列表部分 -->
      <ul class="business mb-14vw">
        <li v-for="(business, index) in businesses" :key="index"
            class="p-4vw mb-4vw bg-white rounded-2vw shadow-sm border border-gray-200 flex">
          <div class="business-img w-18vw h-18vw bg-center bg-no-repeat bg-contain"
               :style="{ backgroundImage: `url('/img/sj${index < 9 ? '0' + (index+1) : index+1}.png')` }"></div>
          <div class="business-info w-full pl-3vw">
            <div class="business-info-h flex justify-between items-center mb-2vw">
              <h3 class="text-4vw text-gray-800">{{ business.name }}</h3>
              <div class="business-info-like w-1.6vw h-3.4vw bg-gray-600 text-white text-4vw flex justify-center items-center mr-4vw">
                &#8226;
              </div>
            </div>
            <div class="business-info-star flex justify-between items-center mb-2vw text-3.1vw">
              <div class="business-info-star-left flex items-center">
                <!-- 添加的星星效果 -->
                <i class="fa fa-star text-[#FEC80E] mr-0.5vw"></i>
                <i class="fa fa-star text-[#FEC80E] mr-0.5vw"></i>
                <i class="fa fa-star text-[#FEC80E] mr-0.5vw"></i>
                <i class="fa fa-star text-[#FEC80E] mr-0.5vw"></i>
                <i class="fa fa-star text-[#FEC80E] mr-0.5vw"></i>
                <p class="text-gray-600 ml-1vw">4.9 月售345单</p>
              </div>
              <div class="business-info-star-right bg-[#0097FF] text-white text-2.4vw rounded-2px px-0.6vw">
                蜂鸟专送
              </div>

            </div>
            <div class="business-info-delivery flex justify-between items-center mb-2vw text-3.1vw text-gray-600">
              <p>&#165;15起送 | &#165;3配送</p>
              <p>3.22km | 30分钟</p>
            </div>
            <div class="business-info-explain flex items-center mb-3vw">
              <div class="border border-gray-300 text-2.8vw text-gray-600 rounded-3px px-0.1vw">
                各种饺子
              </div>
            </div>
            <div v-for="(promo, pIndex) in business.promotions" :key="pIndex"
                 class="business-info-promotion flex justify-between items-center mb-1.8vw">
              <div class="business-info-promotion-left flex items-center">
                <div class="business-info-promotion-left-incon w-4vw h-4vw rounded-3px text-white text-3vw flex justify-center items-center"
                     :style="{ backgroundColor: pIndex === 0 ? '#70BC46' : '#F1884F' }">
                  {{ pIndex === 0 ? '新' : '特' }}
                </div>
                <p class="text-gray-600 text-3vw ml-2vw">{{ promo }}</p>
              </div>
              <div v-if="pIndex === 0" class="business-info-promotion-right flex items-center text-2.5vw text-gray-500">
                <p class="mr-2vw">2个活动</p>
                <i class="fa fa-caret-down"></i>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <!-- 底部菜单部分 -->
      <FooterNav />
<!--      <ul class="footer fixed bottom-0 left-0 right-0 h-14vw bg-white border-t border-gray-300 flex justify-around items-center">-->
<!--        <li v-for="(item, index) in footerItems" :key="index"-->
<!--            class="flex flex-col justify-center items-center text-gray-500 cursor-pointer"-->
<!--            @click="item.action">-->
<!--          <i :class="item.icon"></i>-->
<!--          <p class="text-2.8vw mt-1vw">{{ item.label }}</p>-->
<!--        </li>-->
<!--      </ul>-->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import FooterNav from '@/components/FooterNav.vue';
const router = useRouter();

// 响应式数据
const foodTypes = ref([
  '美食', '早餐', '跑腿代购', '汉堡披萨', '甜品饮品',
  '速食简餐', '地方小吃', '米粉面馆', '包子粥铺', '炸鸡炸串'
]);

const sortOptions = ref(['综合排序', '距离最近', '销量最高', '筛选']);
const goToBusinessList = (category) => {
  router.push({
    name: 'BusinessList',
    query: { category }
  });
};

const businesses = ref([
  { name: '万家饺子（软件园E18店）', promotions: ['饿了么新用户首单立减9元', '特价商品5元起'] },
  { name: '小锅饭豆腐馆（全运店）', promotions: ['饿了么新用户首单立减9元', '特价商品5元起'] },
  { name: '麦当劳麦乐送（全运路店）', promotions: ['饿了么新用户首单立减9元', '特价商品5元起'] },
  { name: '米村拌饭（浑南店）', promotions: ['饿了么新用户首单立减9元', '特价商品5元起'] },
  { name: '申记串道（中海康城店）', promotions: ['饿了么新用户首单立减9元', '特价商品5元起'] }
]);




</script>





<style scoped>
/* 图标样式 */
.icon-location {
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>') no-repeat center;
  background-size: contain;
}

/* 搜索框固定效果 */
.search-fixed-top {
  transition: all 0.3s ease;
}

/* 特殊样式 */
.business-info-like {
  font-size: 24px;
  line-height: 1;
}
</style>